<template>
	<div>
		<div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i>流程报表</el-breadcrumb-item>
                <el-breadcrumb-item>报表权限</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <!-- 查询表单 -->
		<el-form :inline="true" :model="search" label-width="90px">
			<el-form-item label="权限名称">
				<el-input v-model="search.name" size="small" placeholder="权限名称"></el-input>
			</el-form-item>

			<el-form-item label="流程报表">
				<el-select v-model="search.workflowReportId" filterable placeholder="流程报表">
					<el-option v-for="item in workflowReportSelectData" :key="item.id" :label="item.label" :value="item.id"></el-option>
				</el-select>
			</el-form-item>

			<el-row style="text-align: center;">
				<el-form-item>
					<el-button type="primary" plain @click="searchTable" icon="el-icon-search">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="info" plain @click="resetForm(search)" icon="el-icon-refresh">重置</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" plain @click="addAuthorityEditor" icon="el-icon-edit">新增</el-button>
				</el-form-item>
			</el-row>
		</el-form>
		<!-- 查询表单 End-->
		
		<!-- 编辑表单 -->
		<el-dialog title="权限基本信息编辑" :visible.sync="isEditable" center>
			<el-form :model="editer" ref="authorityInfo" label-width="120px">
				<el-form-item label="权限名称" :rules="{required: true, message: '请填写权限名称', trigger: 'blur'}" prop="name">
					<el-input v-model="editer.name" size="small" placeholder="权限名称"></el-input>
				</el-form-item>

				<el-form-item label="流程报表" :rules="{type: 'number', required: true, message: '请选流程报表', trigger: 'change'}" prop="workflowReportId"> 
					<el-select @change="cascaderWorkflowInfo" v-model="editer.workflowReportId" filterable placeholder="流程报表">
						<el-option v-for="item in workflowReportSelectData" :key="item.id" :label="item.label" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				
				<el-form-item label="流程部门字段"  :rules="{type: 'number', required: true, message: '请选流程部门字段', trigger: 'change'}" prop="deptFieldId">
					<el-select :disabled="isSelected" v-model="editer.deptFieldId" filterable placeholder="流程部门字段">
						<el-option v-for="item in workflowReportFieldSelectData" :key="item.id" :label="item.label" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="流程申请人字段"  :rules="{type: 'number', required: true, message: '请选流程申请人字段', trigger: 'change'}" prop="requestFieldId">
					<el-select :disabled="isSelected" v-model="editer.requestFieldId" filterable placeholder="流程申请人字段">
						<el-option v-for="item in workflowReportFieldSelectData" :key="item.id" :label="item.label" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="info" @click="cancelEdit">取消</el-button>
				<el-button type="primary" @click="finishedEdit('authorityInfo')">确定</el-button>
			</span>
		</el-dialog>
		<!-- 编辑表单 End-->

        <!--报表权限配置列表 -->
		<el-table :data="authorityData" border highlight-current-row v-loading="listLoading" :stripe="true" :fit="true" style="width: 100%;">
			<el-table-column type="selection" width="55" align="center"></el-table-column>
			<el-table-column type="index" width="60" align="center"></el-table-column>
			<el-table-column prop="name" label="权限名称" align="center" min-width="90" sortable></el-table-column>
			<el-table-column prop="workflowReportName" label="流程报表" align="center" min-width="90" sortable></el-table-column>
			<el-table-column prop="deptFieldLabel" label="流程部门字段" align="center" min-width="90" ></el-table-column>
			<el-table-column prop="requestFieldLabel" label="流程申请人字段" align="center" min-width="90" ></el-table-column>
			<el-table-column label="报表拓展权限设置" min-width="130" align="center" >
				<template scope="scope">
					<el-button type="primary" plain size="small" @click="reporDeptAuthorityEdit(scope.$index, scope.row)">部门授权</el-button>
					<el-button type="info" plain size="small" @click="reporHummerAuthorityEdit(scope.$index, scope.row)">特殊人员授权</el-button>
				</template>
			</el-table-column>

			<el-table-column label="操作" width="150" align="center">
				<template scope="scope">
					<el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row, editer)">编辑</el-button>	
					<!-- 删除提示tooltip -->
					<el-popover ref="popoverDelete" placement="top"  v-model="scope.row.visible">
						<p>确定要删除这条数据吗?</p>
						<div style="text-align: center;">
							<el-button size="mini" type="success" @click="scope.row.visible = false">取消</el-button>
							<el-button size="mini" type="danger" @click="handleDel(scope.$index, scope.row)">确定</el-button>
						</div>
						<el-button type="danger" size="small" slot="reference" >删除</el-button>
					</el-popover>
				</template>
			</el-table-column>
		</el-table>
		<!--报表权限配置列表 End-->

		<!-- 报表权限配置列表-分页 -->
		<div class="pagination">
            <el-pagination
                    @current-change="handlePageChange"
                    @size-change="handleSizeChange"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pagination.pagesize"
                    :current-page="pagination.page"
                    layout="sizes, prev, pager, next"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <!--报表权限配置列表-分页 End -->
		
		<!-- 部门权限授权对话框 -->
		<dept-edit-dlg :isConfigDept.sync="isConfigDept" :authorityInfo="authorityInfo"></dept-edit-dlg>
		<!-- 部门权限授权对话框 End-->

		<!-- 人员权限授权对话框 -->
		<hummer-edit-dlg :isConfigHummer.sync="isConfigHummer" :authorityInfo="authorityInfo"></hummer-edit-dlg>
		<!-- 人员权限授权对话框 End-->

	</div>
</template>

<script>
	import deptAuthDialog from '../../components/dialog/departmentAuthorityDialog.vue'
	import hummerAuthDialog from '../../components/dialog/hummerAuthorityDialog.vue'

	export default {
		name: 'reportAuthority',
		data(){
			return {
				// 流程报表下拉框数据
				workflowReportSelectData: [],
				// 报表字段下拉框数据
				workflowReportFieldSelectData: [],

				// 报表字段可编辑状态 - dept/request
				isSelected: true,

				// 查询表单
				search: {
					name: '',
					workflowReportId: '',
				},

				// 编辑表单
				editer: {
					id: '',
					name: '',
					workflowReportId: '',
					deptFieldId: '',
					requestFieldId: ''
				},

				isEditable: false,

				// 权限表格数据
				authorityData: [],

				// 报表配置-分页数据
				pagination: {
					// 分页大小
					pagesize: 10,
					// 当前页
					page: 1,
					// 所有页总数
					total: 1,
				},

				// 部门授权对话框标识
				isConfigDept: false,
				// 人员授权对话框标识
				isConfigHummer: false,

				// 当前权限信息
				authorityInfo: {},
			}
		},
		mounted: function(){
			this.searchTable();

			// 获得流程报表下拉框数据
			this.$http.post('/api/report/authority/select/workflowReport', {emulateJSON: true}).then(response => {
				this.workflowReportSelectData = response.data;
			}, response => {
				console.log('Ajax can not get the data from the server!!!');
			});
		},
		components: {
			'dept-edit-dlg': deptAuthDialog,
			'hummer-edit-dlg': hummerAuthDialog
		},
		methods: {
			// 表格查询
			searchTable: function(){
				this.listLoading = true;
				this.$http.post('/api/report/authority', {search: this.search, page: this.pagination.page, rows: this.pagination.pagesize}, {emulateJSON: true}).then(response => {
					this.authorityData = response.data.rows;
					this.pagination.total = response.data.total;
					this.listLoading = false;
				}, response => {
					console.log('Ajax can not get the data from the server!!!');
					this.listLoading = false;
				});
			},
			// 重置表单数据
			resetForm: function(obj){
				for (let item in obj){
					obj[item] = '';
				}
			},
			// 新增配置项
			addAuthorityEditor: function(formName){
				this.isEditable = true;
				this.resetForm(this.editer);
			},

			// 级联报表下拉框数据--带出对应字段
			cascaderWorkflowInfo: function(value){
				this.editer.deptFieldId = '';
				this.editer.requestFieldId = '';
				this.ajaxGetWorkflowField(value);
			},
			// ajax获得流程字段信息
			ajaxGetWorkflowField: function(reportId){
				this.$http.post('/api/report/authority/select/workflowField', {reportId: reportId}, {emulateJSON: true}).then(response => {
					this.workflowReportFieldSelectData = response.data;
					// 设置报表字段可编辑
					this.isSelected = false;
				}, response => {
					console.log('Ajax can not get the data from the server!!!');
					// 取消报表字段可编辑
					this.isSelected = true;
				});
			},

			/* 对话框编辑 */
			// 激活对话框编辑 -> 权限配置信息编辑
			handleEdit: function(column, row, editer){
				console.log(row, editer);
				for (let item in editer){
					console.log(item);	
					editer[item] = row[item];
				}
				console.log(row, editer);
				this.ajaxGetWorkflowField(row.workflowReportId);
				this.isEditable = true;
			},
			// 删除表格数据操作
			handleDel: function(index, row){
				this.$http.post('/api/report/authority/delete', {id: row.id}, {emulateJSON: true}).then(response => {
					console.log('删除数据！！');
					// 刷新表格数据
					this.searchTable();
				}, response => {
					console.log('Ajax can not get the data from the server!!!');
				});
			},
			// 取消对话框编辑
			cancelEdit: function(){
				this.resetForm(this.editer);
				this.isEditable = false;
				this.isSelected = true;
			},
			// 完成对话框编辑
			finishedEdit: function(formName){
				this.$refs[formName].validate((valid) => {
					if (valid){
						this.$http.post('/api/report/authority/saveEdit', {editer: this.editer}, {emulateJSON: true}).then(response => {
							this.isEditable = false;
							this.searchTable();
						}, response => {
							console.log('Ajax can not get the data from the server!!!');
						});
					} else {
						this.$notify({
							title: '错误',
							message: '信息填写不完整！',
							type: 'error'
						});
					}
				});
				this.isSelected = true;
			},
			/* 对话框编辑 End */

			/* 表格分页 */
			// 改变页码
			handlePageChange: function(currentPage){
				this.$http.post('/api/report/authority', {search: this.search, page: currentPage, rows: this.pagination.pagesize}, {emulateJSON: true}).then(response => {
					this.authorityData = response.data.rows;
					this.pagination.total = response.data.total;
				}, response => {
					console.log('Ajax can not get the data from the server!!!');
				});
			},
			// 改变页面大小
			handleSizeChange: function(size){
				this.pagination.pagesize = size;
				this.handlePageChange(this.pagination.page);
			},
			/* 表格分页 End */

			// 激活人员授权编辑对话框
			reporHummerAuthorityEdit: function(column, row){
            	this.isConfigHummer = true;
            	console.log(row);
            	this.authorityInfo = row;
			},

			// 激活部门授权编辑对话框
			reporDeptAuthorityEdit: function(column, row){
            	this.isConfigDept = true;
            	console.log(row);
            	this.authorityInfo = row;
			}
		}
	}
</script>